<script setup>
import { ref, computed } from 'vue'
import ImageCard from '@/views/new-screen/monitoring-alarms/left/image-card.vue'
import img1 from '@/assets/imgs/img1.png'
import img2 from '@/assets/imgs/img2.png'
import img3 from '@/assets/imgs/img3.png'
import img4 from '@/assets/imgs/img4.png'

import { usePopup } from '@/hooks/usePopup'
const { removePopup } = usePopup()
const key = 'warning-dzwl'

const videoList = [
  {
    name: '#1专变房A',
    url: img1,
    status: 'online',
  },
  {
    name: '#2专变房A',
    url: img2,
    status: 'outline',
  },
  {
    name: '#3专变房A',
    url: img3,
    status: 'online',
  },
  {
    name: '#4专变房A',
    url: img4,
    status: 'online',
  },
  {
    name: '#5专变房A',
    url: img4,
    status: 'online',
  },
  {
    name: '#6专变房A',
    url: img4,
    status: 'online',
  },
]

const currentPage = ref(0)

const maxPage = computed(() => {
  return videoList.length / 4 - 1
})

const videoList2 = computed(() => {
  if (videoList.length > 4) {
    return videoList.slice(currentPage.value * 4, (currentPage.value + 1) * 4)
  } else {
    return videoList
  }
})

const propertyList = [
  {
    property: '设备名称',
    key: 'name',
    value: '脉冲探测器1',
  },
  {
    property: '设备位置',
    value: '大门东侧',
  },
  {
    property: '电子围栏',
    value: '电子围栏1',
  },
  {
    property: '报警类型',
    key: 'type',
    value: '人员闯入',
  },
  {
    property: '报警等级',
    value: '一级',
  },
  {
    property: '报警时间',
    value: '2024-01-28 16:32:45',
  },
  {
    property: '处理状态',
    key: 'status',
    value: '待处理',
  },
  {
    property: '周边摄像头',
    key: 'number',
    value: '（5个）',
  },
]

const previous = () => {
  if (currentPage.value > 0) {
    currentPage.value--
  }
}

const next = () => {
  if (currentPage.value < maxPage.value) {
    currentPage.value++
  }
}
</script>

<template>
  <div class="device-dzwl-popup" v-drag="{ target: '.title-area' }">
    <div class="title-area">
      <div class="title"></div>
      <div class="title-right" @click="removePopup(key)"></div>
    </div>
    <div class="content-area">
      <el-row :gutter="24">
        <el-col
          :class="item.key"
          :span="24"
          v-for="(item, index) in propertyList"
          :key="index"
          ><span class="property">{{ item.property }}:</span
          ><span class="value">{{ item.value }}</span></el-col
        >
      </el-row>
      <div class="video-list">
        <image-card
          v-for="(item, index) in videoList2"
          :key="index"
          :name="item.name"
          :src="item.url"
        />
      </div>
      <div class="change-video-page">
        <span
          :class="['left-wrap-icon', currentPage > 0 ? 'active' : '']"
          @click="previous"
        ></span>
        <span
          :class="['right-wrap-icon', currentPage < maxPage ? 'active' : '']"
          @click="next"
        ></span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.device-dzwl-popup {
  width: 356px;
  height: 568px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: url('@/assets/imgs/box_mjtc_dzwl.png') 100% 100% no-repeat;

  .title-area {
    height: 40px;
    display: flex;
    justify-content: space-between;

    .title {
      margin-left: 33px;
      width: 87px;
      height: 31px;
      background: url('@/assets/imgs/bjxx-title.png') 100% 100% no-repeat;
    }

    .title-right {
      width: 16px;
      height: 16px;
      background: url('@/assets/imgs/ic_gb.png') 100% 100% no-repeat;
      margin-top: 24px;
      margin-right: 24px;
      cursor: pointer;
    }
  }

  .content-area {
    padding: 14px 26px;

    :deep(.el-row) {
      .el-col {
        font-size: 14px;
        margin-bottom: 20px;
        color: white;
        .property {
          color: rgba(150, 186, 208, 1);
        }

        .value {
          margin-left: 9px;
        }

        &.name {
          font-size: 16px;
          font-weight: 500;
          color: #25d7f1;
          .property {
            color: #25d7f1;
          }
        }

        &.type {
          .value {
            color: #00ff96;
          }
        }

        &.status {
          .value {
            color: rgba(237, 87, 80, 1);
          }
        }

        &.number {
          .value {
            color: #25d7f1;
          }
        }
      }
    }

    .video-list {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: 95px 95px;
    }

    .change-video-page {
      width: 100%;
      display: flex;
      justify-content: center;
      height: 20px;
      align-items: center;

      .left-wrap-icon,
      .right-wrap-icon {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .left-wrap-icon {
        background-image: url('@/assets/imgs/ic_z_nor.png');
        margin-right: 34px;

        &.active {
          background-image: url('@/assets/imgs/ic_z_del.png');
        }
      }

      .right-wrap-icon {
        background-image: url('@/assets/imgs/ic_y_del.png');
        &.active {
          background-image: url('@/assets/imgs/ic_y_nor.png');
        }
      }
    }
  }
}
</style>
